<script setup>
import { reactive, ref, onMounted } from "vue";
import { getOrder, getOrderStatistic } from "@/api";
import { useRouter } from "vue-router"
import Image from "@/components/Image.vue"
import dayjs from "dayjs"
import { formatPrice } from "@/utils"
const router = useRouter();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const state = reactive({
    status: '',
    begin_date: '',
    end_date: '',
    page: 0,
    size: 20, balance: 0
})
onMounted(() => {
    getOrderStatistic().then(res => {

        state.balance = res.balance;

    })
})
const chose = (status) => {
    state.status = status;
    list.value = [];
    state.page = 0;
    loading.value = true;
    onLoad();
}
const onLoad = () => {

    getOrder({
        status: state.status,
        begin_date: state.begin_date,
        end_date: state.end_date,
        page: state.page,
        size: state.size
    }).then(res => {

        list.value = [
            ...list.value,
            ...res.content
        ]
        state.page += 1;
        loading.value = false;
        if (list.value.length >= res.total) {
            finished.value = true;
        }
    })
}
const goTo = (url) => {
    router.push(url)
}
</script>

<template>
    <div class="h-2"></div>
    <div class="h-full">
        <div class=" text-[16px] p-[15px]">
            {{ $t('Available balance') }}:${{ formatPrice(state.balance) }}
        </div>
        <div class="flex flex-wrap  text-[14px]  p-[10px] pt-0">
            <div class="text-nowrap px-[5px]  mr-[2px]" @click="chose('')"
                :class="state.status == '' ? 'border rounded-md border-black' : ''">
                {{ $t('All') }}
            </div>
            <div class="text-nowrap  px-[5px] mr-[2px]" style="max-width: fit-content;" @click="chose('UNPAID')"
                :class="state.status == 'UNPAID' ? 'border rounded-md border-black' : ''">
                {{ $t('Orders to be Processed') }}
            </div>
            <div class="text-nowrap  px-[5px] mr-[2px]" style="max-width: fit-content;" @click="chose('COMPLETE')"
                :class="state.status == 'COMPLETE' ? 'border rounded-md border-black' : ''">
                {{ $t('Finished Orders') }}
            </div>
            <div class="text-nowrap  px-[5px] mr-[2px]" style="max-width: fit-content;" @click="chose('FROZEN')"
                :class="state.status == 'FROZEN' ? 'border rounded-md border-black' : ''">
                {{ $t('Frozen Orders') }}
            </div>
        </div>
        <div class="flex-1">
            <van-list v-model:loading="loading" :finished="finished"
                :finished-text="list.length > 10 ? $t('No more') : ''" :loading-text="$t('Loading...')" @load="onLoad">
                <div class="px-[15px]" v-for="item in list" :key="item.id">
                    <div class="flex justify-between py-[10px]  text-[12px]">
                        <div>
                            {{ dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                        <template v-if="item.status == 'UNPAID'">
                            <div class="bg-[#FFBB00] px-[10px] h-[20px] rounded-md inline-block">
                                {{ $t('Pending') }}
                            </div>
                        </template>
                        <template v-if="item.status == 'COMPLETE'">
                            <div class="bg-[#FFBB00] px-[10px] h-[20px] rounded-md inline-block">
                                {{ $t('Finished Orders') }}
                            </div>
                        </template>
                        <template v-if="item.status == 'FROZEN'">
                            <div class="bg-[#FFBB00] px-[10px] h-[20px] rounded-md inline-block">
                                {{ $t('Frozen Orders') }}
                            </div>
                        </template>
                    </div>
                    <div class="flex">
                        <Image :src="item.image" class="h-[60px] w-[60px]" />
                        <div class="ml-[10px] color-[#666] ">
                            {{ item.goodsName }}
                        </div>
                    </div>
                    <div class="flex items-center justify-between mt-[10px]">
                        <p>{{ $t('Total Value') }}:</p>
                        <p class="opacity-60">${{ item.total.toFixed(2) }}</p>
                    </div>
                    <div class="flex items-center justify-between mt-[10px]">
                        <p>{{ $t('Commission') }}:</p>
                        <p class="opacity-60">${{ item.rebate.toFixed(2) }}</p>
                    </div>
                    <button @click="goTo(`/submit?id=${item.id}`)" v-if="item.status == 'UNPAID'"
                        class="btn bg-[#232E40] text-white h-[50px] mt-[10px] rounded-md min-h-0 w-full text-[12px]">
                        {{ $t('Submit') }}
                    </button>
                </div>
            </van-list>
            <van-empty :description="$t('No more')" v-if="!loading && list.length == 0" />
        </div>
    </div>
    <div class="h-1 mb-6"></div>

</template>
